<template>
	<Layout :innerBottom="false">
		<template #title>荣誉详情</template>
		<ScorllRefresher @refresh="loadData">
			<view class="inline-flex fill column honor-detail">
				<view class="honor-detail__title">{{detail.title}}</view>
				<view class="inline-flex aic fill honor-detail__time">
					<image src="/static/image/other/time.icon.png"></image>{{dateFormat(detail.createTime)}}
				</view>
				<view class="iflex fill aic jcc honor-detail__image aspect-fill">
					<image mode="aspectFill" :src="detail.awardImage"></image>
				</view>
				<u-parse :html="detail.awardContent"></u-parse>
			</view>
		</ScorllRefresher>
	</Layout>
</template>

<script setup lang="ts">
	import type { AnyObj } from '@/types/global';
	import Layout from '@/components/layout/layout.vue';
	import ScorllRefresher from '@/components/scroll-refresher/scroll-refresher.vue';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { dateFormat } from '@/utils/format';
	import { getHonorDetail } from '@/apis/lawfirm';

	let id = '';
	const detail = ref<AnyObj>({
		id: '',
		title: '',
		content: '',
		createTime: '',
	})

	function loadData() {
		getHonorDetail(id).then((result) => {
			detail.value = result.data;
		});
	}

	onLoad((option) => {
		option = option as { id : string };
		id = option.id;
		console.log(id);	
		loadData();
	});
</script>

<style lang="scss">
	.honor-detail {
		padding: 32rpx;

		&__title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 48rpx;
		}

		&__time {
			padding: 24rpx 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #979797;
			line-height: 48rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}

		&__image {
			padding-bottom: 36rpx;

			image {
				width: 684rpx;
				height: 324rpx;
				flex-shrink: 0;
				border-radius: 18rpx;
			}
		}
	}
</style>